<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>成绩柱状图</title>
  <script src="/lib/echarts.min.js"></script>
</head>

<body>
  <div id="container" style="width:600px;height:400px"></div>
  <script>
    let chart = echarts.init(document.getElementById('container'))
    let xAxisArr = ['Jake', 'Tom', 'Alex', 'Sam', 'John', 'Li Hua']
    let yAxisArr = [87, 69, 81, 73, 92, 100, 79]
    let option = {
      title: {
        text: '98班成绩图',
        textStyle: {
          color: '#ff6700',
          fontStyle: 'italic'
        },
        borderWidth: 5,
        borderColor: '#ff1900',
        borderRadius: 5,
        left: 50,
        top: 10
      },
      // 图表提示
      tooltip: {},
      legend: {
        data: ['分数']
      },
      xAxis: {
        // type: 'category', //类目轴
        type: 'value',
        // data: xAxisArr
      },
      yAxis: {
        type: 'category', //数值轴
        data: xAxisArr
      },
      series: [
        {
          name: '分数',
          type: 'bar', //决定图表类型
          markPoint: { //设置最值
            data: [
              { type: 'max', name: '最大值' },
              { type: 'min', name: '最小值' }
            ]
          },
          markLine: { //可以设置平均值
            data: [
              {type: 'average', name: '平均值'}
            ]
          },
          label: {
            show: true,
            rotate: '60',
            position: 'top'
          },
          data: yAxisArr
        },

      ],
      barWidth: '40%'
    }
    chart.setOption(option)
  </script>
</body>

</html>